<template>
    <div>
        <el-button type="primary" @click="addRow">新增行</el-button>
        <table>
            <thead>
                <tr>
                    <th>饲养天数</th>
                    <th>保健方式</th>
                    <th>保健方法</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in healthInfoList" :key="index">
                    <td>
                        <input v-model="item.rearingDays" />
                    </td>
                    <td>
                        <input v-model="item.imunityWay" />
                    </td>
                    <td>
                        <input v-model="item.imunityMethods" />
                    </td>

                    <td>
                        <el-button type="text" @click="editRow(index)">修改</el-button>
                        <el-button type="text" @click="deleteRow(index)">删除</el-button>
                    </td>
                </tr>
                <tr v-if="isAdding">
                    <td>
                        <input v-model="newRow.rearingDays" />
                    </td>
                    <td>
                        <input v-model="newRow.imunityWay" />
                    </td>
                    <td>
                        <input v-model="newRow.imunityMethods" />
                    </td>
                    <td>
                        <el-button type="text" @click="saveRow">保存</el-button>
                        <el-button type="text" @click="cancelAdd">取消</el-button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            healthInfoList: [],
            newRow: { rearingDays: '', imunityWay: '', imunityMethods: '' },
            isAdding: false

        };
    },
    mounted() {
        this.loadHealthInfos();
    },
    methods: {
        loadHealthInfos() {
            axios.get('http://localhost:62301/api/Trance/GetHealthInfos')
                .then(response => {
                    this.healthInfoList = response.data;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        addRow() {
            this.isAdding = true;
        },
        saveRow() {
            axios.post('http://localhost:62301/api/Trance/AddHealthInfo', this.newRow)
                .then(response => {
                    this.healthInfoList.push(response.data);
                    this.newRow = { rearingDays: '', imunityWay: '', imunityMethods: '' };
                    this.isAdding = false;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        cancelAdd() {
            this.newRow = { rearingDays: '', imunityWay: '', imunityMethods: '' };
            this.isAdding = false;

        },
        editRow(index) {
            // 编辑行的逻辑
        },
        deleteRow(index) {
            axios.delete(`http://localhost:62301/api/Trance/DeleteHealthInfo/${index}`)
                .then(() => {
                    this.healthInfoList.splice(index, 1);
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
};
</script>